<template>
  <!-- 潮流新款 模板 -->
  <div>
    <div class="more-box" v-if="wideGoods.length">
      <div class="left">
        <img v-lazy="wideGoods[0].left.img" alt="" v-if="wideGoods[0].left.img">
        <button @click="editItem('left')">编辑</button>
        <div class="keyword" v-if="wideGoods[0].left.keyWord">
          <span v-for="(val, index) in wideGoods[0].left.keyWord.slice(1, -1).split(',')" :key="index" :title="val">...</span>
        </div>
      </div>
      <div class="middle">
        <div class="m-item" v-for="val in wideGoods[1].middle.goodsList" :key="val.seq">
          <div class="m-img"><img v-lazy="val.img" alt="" v-if="val.img"></div>
          <div class="right_title">{{val.titleName}}</div>
          <button @click="editItem(`middle_${val.seq - 1}`)">编辑</button>
        </div>
      </div>
      <div class="right">
        <div class="right_title">
          <div>{{wideGoods[2].right.title.titleName}}</div>
          <div>{{wideGoods[2].right.title.enName}}</div>
        </div>
        <div class="imgBox">
          <img v-lazy="wideGoods[2].right.goodsList[rightIndex].img" alt="" v-if="wideGoods[2].right.goodsList[rightIndex]">
        </div>
        <button @click="editItem('right')">编辑</button>
        <div class="markBox">
          <div class="mark" v-for="(val, index) in 5" :key="index" @click="rightIndex = index" :class="{active: rightIndex == index}">
            <span></span> 
          </div>
          <!-- <div class="mark" @click="rightIndex = 1" :class="{active: rightIndex == 1}"> <span></span> </div>
          <div class="mark" @click="rightIndex = 2" :class="{active: rightIndex == 2}"> <span></span> </div> -->
        </div>
      </div>
    </div>

    <div class="more-box" v-else>
      <div class="left">
        <button @click="editItem('left')">编辑</button>
      </div>
      <div class="middle">
        <div class="m-item">
          <button @click="editItem('middle_0')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_1')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_2')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_3')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_4')">编辑</button>
        </div>
        <div class="m-item">
          <button @click="editItem('middle_5')">编辑</button>
        </div>
      </div>
      <div class="right">
        <button @click="editItem('right')">编辑</button>
        <div class="markBox">
          <div class="mark" v-for="(val, index) in 5" :key="index" @click="rightIndex = index" :class="{active: rightIndex == index}">
            <span></span> 
          </div>
          <!-- <div class="mark" @click="rightIndex = 0" :class="{active: rightIndex == 0}"> <span></span> </div>
          <div class="mark" @click="rightIndex = 1" :class="{active: rightIndex == 1}"> <span></span> </div>
          <div class="mark" @click="rightIndex = 2" :class="{active: rightIndex == 2}"> <span></span> </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    floorId: String,
    wideGoods: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      rightIndex: 0
    }
  },
  methods: {
    editItem(position) {
      if (position == 'right') {
        this.$emit('on-edit', this.floorId, 'new_product', `${position}_${this.rightIndex}`)
      } else {
        this.$emit('on-edit', this.floorId, 'new_product', position)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../../scss/_var.scss';
.more-box {
  position: relative;
  .left, .right {
    width: 108px;
    height: 234px;
    background: $bg-gray;
  }
  .left {
    position: relative;
    .keyword {
      position: absolute;
      bottom: 0;
      width: 108px;
      padding: 0 10px;
      span {
        display: inline-block;
        width: 25px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin-bottom: 10px;
        margin-right: 5px;
        border: 1px solid #D7D7D7;
        &:nth-of-type(3), &:nth-of-type(6) {
          margin-right: 0;
        }
      }
    }
  }
  .right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
  }
  .middle {
    width: 337px;
    position: absolute;
    top: 0;
    left: 116px;
    .m-item {
      background: $bg-gray;
      float: left;
      position: relative;
      width: 108px;
      height: 114px;
      margin-right: 5px;
      &:nth-of-type(3), &:nth-of-type(6) {
        margin-right: 0;
      }
      &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6) {
        margin-top: 7px;
      }
    }
    .m-img {
      width: 100%;
      height: 90px;
    }
  }
}
.markBox{
  position:absolute;
  width: 100%;
  height:20px;
  bottom:6px;
  left:50%;
  margin-left: 5px;
  transform: translate(-50%,0);
  font-size:0px;
  .mark{
    display:inline-block;
    height: 100%;
    width: 10px;
    padding: 7px 0px;
    margin:0 5px;
    cursor: pointer;
    span{
      display:inline-block;
      width:100%;
      height:100%;
      background: $btn-search;
      border-radius:3px;
    }
    &.active{
      cursor:default;
      span{
        background: $color-main;
        
      }
    }
  }
}
.right_title {
  text-align: center;
  & > div:nth-of-type(1) {
    font-size: 14px;
  }
  & > div:nth-of-type(2) {
    font-size: 12px;
  }
}
.imgBox {
  width: 100%;
  height: 140px;
  margin-top: 10px;
}
button {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: $color-main;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 12px;
}
</style>
